
## Table of Contents

1. [Introduction](#introduction)
2. [Create GA4 Property](#create-ga4-property)
3. [Create New Google Tag Manager Container](#create-new-google-tag-manager-container)
4. [Install Google Tag Manager into Your Site](#install-google-tag-manager-into-your-site)
5. [Add Google Analytics GA4 Configuration](#add-google-analytics-ga4-configuration)
6. [Conclusion](#conclusion)

## Introduction

This page shows an example of how to set up Google Analytics 4 with Google Tag Manager. Please be aware that Google Universal Analytics will no longer process new data beginning July 1, 2023. You'll need to switch to a Google Analytics 4 Property.

## Create GA4 Property

Here, we'll create a GA4 property. If you have an existing account with the old Universal Analytics, you can use the same account, create a new property, and use the GA4 Setup Assistant to set up GA4.
![GA4 Setup Assistant](/images/setup-ga4-with-gtm/img4.png)

Choose the option to create a new Google Analytics 4 Property.
![Create GA4 - Get Started](/images/setup-ga4-with-gtm/img5.png)

Click Create Property to create a new GA4 property. Once you create a GA4 property, make a note of the measurement ID, because we'll need this value later when adding it to Google Tag Manager.
![Create GA4 Property](/images/setup-ga4-with-gtm/img6.png)

## Create New Google Tag Manager Container

Here, create a new Google Tag Manager container under your account.
![GTM Code Snippet](/images/setup-ga4-with-gtm/img1.png)

## Install Google Tag Manager into Your Site

Then go to the admin section and follow the instructions to use the code snippet and add it to your site. Once you add the Google Tag Manager code to the site, you can later configure additional tags or scripts to load on the site.

Here, add a new tag and add the Google Analytics GA4 Configuration.
![GTM - GA4 Configuration](/images/setup-ga4-with-gtm/img2.png)

## Add Google Analytics GA4 Configuration

Add the GA4 measurement ID, so Google Tag Manager's GA4 configuration will connect to the new GA4 Analytics measurement ID.
![GTM - GA4 Configuration with Measurement ID](/images/setup-ga4-with-gtm/img3.png)

Now, if you load the page with the GTM script you added earlier, it should load the script for GA4 to start collecting default data and sending it to Google Analytics, such as page views.

## Conclusion

Setting up GA4 with Google Tag Manager is straightforward: create a GA4 property, set up a GTM container, install the GTM snippet on your site, and configure the GA4 tag with your measurement ID. This approach gives you the flexibility to manage your analytics configuration without modifying site code directly.


Google Tag Manager provides an easy way to set up Google Analytics 4. This blog walks through the steps to set up GA4 via GTM.

How to Setup Google Analytics 4 with Google Tag Manager


## Table of Contents

1. [Introduction](#introduction)
2. [Why Use dataLayer for GA4?](#why-use-datalayer-for-ga4)
3. [Prerequisites](#prerequisites)
4. [Goal](#goal)
5. [Create Triggers at GTM](#create-triggers-at-gtm)
6. [Create DataLayer Variable](#create-datalayer-variable)
7. [Create Google Analytics GA4 Event](#create-google-analytics-ga4-event)
8. [Choose the Triggering for GA4 Event](#choose-the-triggering-for-ga4-event)
9. [Publish or Preview the GTM Changes](#publish-or-preview-the-gtm-changes)
10. [Verify the Code](#verify-the-code)
11. [Verify at GA4 UI](#verify-at-ga4-ui)
12. [How About BigQuery?](#how-about-bigquery)
13. [Conclusion](#conclusion)

## Introduction

This page shows an example of how to set up GA4 custom events for learning purposes. Please be aware that Google Universal Analytics will no longer process new data beginning July 1, 2023. You'll need to switch to a Google Analytics 4 Property.

## Why Use dataLayer for GA4?

GA4 has different ways to fire events. Enhanced measurement events are built-in events that can be enabled via options. Recommended events won't send automatically but require some configuration or manual setup. Now, if the events you want to fire don't fit either of these scenarios, you can create custom events and send them to GA4. You can use `gtag` or `dataLayer` to send custom events.

This blog will focus on and demonstrate how to use `dataLayer` to fire custom events to GA4.

## Prerequisites

This blog assumes the following tasks are already done on your site:

- You have Google Tag Manager already configured for GA4.
- Your website has loaded the GTM script.
- Your Google Analytics has been linked to BigQuery.

## Goal

The goal is to fire the following dataLayer events. Assume you have a contact form on your home page and you want to track this data in GA4. For testing purposes, we'll fire the events below from the console. Once we fire the events, we'll see how they appear in the browser, how to view them in the GA4 UI, and how the data flows into BigQuery.

```
// we want to fire this event when the user clicks the submit contact form button.
dataLayer.push({"event" : "contact_lead", "email": "test@test.com", "page": "home"});
```

If you just run the above JavaScript in the console, nothing will happen until you finish the following setup at GTM.

## Create Triggers at GTM

In GTM, click Triggers > Custom Events, and enter the event name as `contact_lead`.
![Enter Event Name for Custom Events](/images/setup-datalayer/img1.png)

## Create DataLayer Variable

If you look at the above dataLayer, you can see there are two fields: `email` and `page`. We'll need to configure the dataLayer variables so that running the above dataLayer push will include the `email` and `page` fields.

In GTM, click Variables -> User-Defined Variables, and create 2 dataLayer variables as shown below.
![Enter dataLayer variable for Custom Events](/images/setup-datalayer/img2.png)

## Create Google Analytics GA4 Event

Once you've created the Triggers and Variables, you can create a new GA4 Event tag.
Click Tags > New > Google Analytics: GA4 Event.
![GA4 custom events](/images/setup-datalayer/img3.png)
Here, we'll enter the event name as `contact_lead` and also add 2 Event Parameters. Now the configuration to run the above JavaScript code is ready.

## Choose the Triggering for GA4 Event

Now, the last part is to add the trigger — specifically, when the above event should fire. So far we've set it to all custom events, but you can filter by class or ID.
![GA4 custom events trigger](/images/setup-datalayer/img4.png)

## Publish or Preview the GTM Changes

If you don't want to publish your GTM changes right away, you can preview and test the settings to see if you can fire the events with GA4.

## Verify the Code

Run the code below in the browser console window to test.
![Run dataLayer code](/images/setup-datalayer/img5.png)

After running the above code, take a look at the browser's network tab. You should see some requests starting with `collect?v=2...` — this is the GA4 request.

As you can see, the GA4 request includes the email and page key-value pairs. Without the GTM setup, you won't see this request fire. Without the dataLayer variables, you won't see the email and page included in the payload either.
![GA4 Payload](/images/setup-datalayer/img6.png)

You can test by running the following JavaScript code in the console to see if GA4 will include this data or not. It will not include `data1` unless you configure the dataLayer variable `data1` in GTM.

```
dataLayer.push({"event" : "contact_lead", "email": "test@test.com", "page": "home", "data1": "other data"});
```

## Verify at GA4 UI

You can verify the event by going to GA4's realtime section and checking the events section. As you can see, our `contact_lead` event displays on the page, and you will see the email and page key-value pairs as well.
![GA4 UI](/images/setup-datalayer/img7.png)

## How About BigQuery?

If you've connected GA4 with BigQuery, you should see something like `analytics_111111` with an `events_intraday_` table. That intraday table contains streaming data coming from GA4, and you can see our `contact_lead` event is being written to this table.

![Big Query](/images/setup-datalayer/img8.png)

## Conclusion

GA4 provides `dataLayer` and `gtag` to fire custom events. If using `dataLayer`, you will need to configure triggers and events in GTM. Following the correct steps should allow you to configure things quickly, but having many configurations in GTM might not be suitable for every company's requirements.


Google Tag Manager provides an easy way to set up GA4 and GA4 custom events. This blog walks through how to set up GA4 custom events via GTM.

Google Tag Manager

How to Setup Google Analytics 4 with Google Tag Manager

How to Use dataLayer to Fire GA4 Custom Events via Google Tag Manager